<template>
  <div class="three">
    <div class="box1">
      <span id="zhuce"
        >已有账号?点击
        <router-link to="/login">登录</router-link>
      </span>
      <img id="fyj" src="../assets/14.png" alt="" />
      <h2 style="position: absolute; top: 40px; left: 700px; color: white">
        注册账号
      </h2>
      <hr />

      <div class="box5">
        <p style="padding-top: 40px">
          <label>姓名</label>
          <input
            class="input"
            type="text"
            v-model="username"
            @blur="modifyusername()"
            placeholder="请输入您的姓名"
          />
          <span class="pist">{{ errors.username }}</span>
        </p>
        <p>
          <label>密码</label>
          <input
            class="input"
            v-model="password"
            id="password"
            @blur="modifypwd()"
            type="password"
            placeholder="密码长度至少 6 位，最多 20 位"
          />
          <span class="pist">{{ errors.password }}</span>
        </p>
        <p>
          <label>确认密码</label>
          <input
            class="input"
            id="yzpwd"
            v-model="pwd1"
            type="password"
            @blur="modifypwd1()"
            placeholder="请确认密码"
          />
          <span class="pist">{{ errors.pwd1 }}</span>
        </p>
        <br />
        <p style="position: relative; left: -70px; top: -10px">
          <label>性别</label>
          男 &nbsp;
          <input
            type="radio"
            style="width: 24px; margin: 0"
            value="male"
            v-model="sex"
          />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 女&nbsp;
          <input
            type="radio"
            style="width: 24px"
            class="female"
            value="female"
            v-model="sex"
          />
        </p>
        <p>
          <label>手机号码</label>
          <input
            class="input"
            type="tel"
            v-model="tel"
            @blur="modifytel()"
            placeholder="请输入您的手机号码"
          />
          <span class="pist">{{ errors.tel }}</span>
        </p>

        <p>
          <input class="btn" type="submit" value="注册" @click="login()" />
        </p>
      </div>
    </div>
    <div>
      <img class="eleven" src="../assets/15.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginView',
  data() {
    return {
      sex: '',
      username: '',
      errors: {},
      password: '',
      pwd1: '',
      tel: '',
    };
  },
  methods: {
    modifyusername() {
      if (this.username == null || this.username == '') {
        return (this.errors.username = '格式错误，请重新输入');
      } else {
        return (this.errors.username = '');
      }
    },
    modifypwd() {
      if (
        this.password.length <= 5 ||
        this.password.length >= 20 ||
        this.password.length == ''
      ) {
        return (this.errors.password = '密码格式错误');
      } else {
        return (this.errors.password = null);
      }
    },
    modifypwd1() {
      if (this.password == this.pwd1) {
        return (this.errors.pwd1 = '');
      } else {
        return (this.errors.pwd1 = '两次输入不一致');
      }
    },
    modifytel() {
      const telstr = /^1[3456789]\d{9}$/;
      if (!telstr.test(this.tel) || this.tel == '' || this.tel <= 10) {
        return (this.errors.tel = '请输入正确的手机号码');
      } else {
        return (this.errors.tel = '');
      }
    },
    login(){
            let userInfo = {
            name:this.username,
            password:this.password,
            token:'usertoken'
            }
            if(this.errors.username==''||this.errors.password==''){
                this.$store.dispatch('setUserInfo',userInfo).then(()=>{
                this.$router.push('/')
            })
            }
        },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  /* background: url(./images/beijng.webp); */
}
.three {
  width: 100%;
  height: 700px;
}
.box1 {
  width: 100%;
  height: 680px;
  position: relative;
  /* left: 400px; */
  /* top: 20px; */
  margin: 0 auto;
  background: url(../assets/14.webp);
}

.input {
  width: 300px;
  height: 40px;
  border: 1px solid #ed66b2;
  background: white;
  margin-bottom: 10px;
}

label {
  display: inline-block;
  min-width: 100px;
}

span {
  color: red;
}

.pist {
  font-size: 12px;
  color: red;
}

#s1 {
  margin-top: 20px;
  height: 30px;
}

.box5 {
  width: 580px;
  height: 440px;
  position: relative;
  left: 700px;
  top: 20px;
  background-color: rgba(255, 255, 255, 0.5);
}
#fyj {
  width: 100px;
  position: relative;
  left: 280px;
}

#zhuce {
  color: black;
  margin-top: 80px;
  margin-right: 180px;
  float: right;
}

#zhuce1 {
  text-decoration: none;
}

#zhuce1:hover {
  color: red;
  text-decoration: underline;
}
.eleven {
  position: absolute;
  top: 210px;
  width: 400px;
  left: 220px;
}
</style>
